<template>
  <div>
    <!-- Tab文字 -->
    <div class="lable-title">
      <i class="icon-tanhao"></i>注意：只允许为第三级分类设置相关参数！
    </div>
    <!-- 请输入商品 -->
    <label>请输入商品：</label>
    <el-cascader
      ref="myref"
      :options="newListOfProducts"
      :props="{ expandTrigger: 'hover' }"
      placeholder="请输入"
      v-on:change="handleChange"
    />
    <!-- 动态参数和静态属性 -->
    <el-tabs
      type="card"
      class="demo-tabs"
      v-model="active"
      style="margin: 10px 0"
    >
      <el-tab-pane label="动态参数" name="first">
        <!-- 添加参数 -->
        <AddAParameterPromptBox
          :type="type.state"
          @getConfirm="getConfirm"
        ></AddAParameterPromptBox>
        <!-- 动态参数内容 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <div m="4">
                <p m="t-0 b-2">状态: {{ tableData[0].operate }}</p>
                <p m="t-0 b-2">城市: {{ tableData[0].operate }}</p>
                <p m="t-0 b-2">地址: {{ tableData[0].operate }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" label="#" width="50px" />
          <el-table-column label="参数名称" prop="theParameterName" />
          <el-table-column label="操作" prop="operate" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="second">
        <!-- 添加属性 -->
        <AddAParameterPromptBox
          :type="type.state"
          @getConfirm="getConfirm"
        ></AddAParameterPromptBox>
        <!-- 静态属性内容 -->
        <el-table :data="activefalse" style="width: 100%" >
          <el-table-column type="expand">
            <template #default="props">
              <div m="4">
                <p m="t-0 b-2">状态: {{ tableData[0].operate }}</p>
                <p m="t-0 b-2">城市: {{ tableData[0].operate }}</p>
                <p m="t-0 b-2">地址: {{ tableData[0].operate }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column  type="index"  label="#" width="50px" />
          <el-table-column label="参数名称" prop="theParameterName" />
          <el-table-column label="操作" prop="operate" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, reactive } from "vue";
import { server } from "../../../apis/getApi";
import AddAParameterPromptBox from "./component/AddAParameterPromptBox.vue";
// 默认选择的标签
const active = ref("first");
const type = reactive({
  state: true,
});
// 组件数据
const options = ref([]);
// 监听标签的变化
watch(active, (news, olds) => {
  console.log(news);
  type.state = !type.state;
});

// 数据
const listOfProducts = ref([{}]);
// 动态参数表格数据
const tableData = ref([
  {
    serialNumber: "01",
    theParameterName: "2016-05-01",
    operate: "Tom",
  },
  {
    serialNumber: "02",
    theParameterName: "2016-05-01",
    operate: "Tom",
  },
]);
// 静态参数表格数据
const activefalse = ref([
  {
    serialNumber: "01",
    theParameterName: "2016-05-01",
    operate: "Tom",
  },
  {
    serialNumber: "02",
    theParameterName: "2016-05-01",
    operate: "Tom",
  },
]);
// 添加参数函数
const getConfirm = (e: any) => {
  active.value==="first"?tableData.value.push({
    serialNumber: "03",
    theParameterName: "2016-05-01",
    operate: e.value,
  }):activefalse.value.push({
    serialNumber: "03",
    theParameterName: "2016-05-01",
    operate: e.value,
  })
};

const newListOfProducts = ref([] as object[]);
(async () => {
  const res = await server.get("/api/private/v1/categories");
  listOfProducts.value = res.data.data;
  console.log("newListOfProducts", newListOfProducts.value);
})();


//拿到商品数据
// const res=await server.get(
//   "/api/private/v1/categories/300/attributes?sel=many"
// )
// console.log(res);
// 商品分类
// https://www.liulongbin.top:8888/api/private/v1/categories

const myref = ref<any>("");
const handleChange = (e: any) => {
  // 获取最后节点
  console.log(myref.value.getCheckedNodes());
  console.log(e);
};
</script>
<style scoped lang="scss">
.lable-title {
  background-color: #e6a23c;
  font-size: 13px;
  line-height: 18px;
  color: white;
  padding: 10px 0 10px 10px;
  border-radius: 5px;
  width: 100%;
  display: flex;
  align-items: center;
}
.table-canshu {
  width: 100%;
  height: 100%;
}
/deep/ .el-cascader {
  padding: 10px 0;
}
</style>